<template>
	<div class="vip">
		<img class="about-bg" src="../../assets/img/huiyuanfuwuBG.png" />


		<el-row type="flex" justify="center">
			<el-row class="Navsousuo" type="flex" justify="space-between">
				<el-col>
					<el-breadcrumb separator="/" style="font-size: 13px;">
						<el-breadcrumb-item>当期那位置：政策法规</el-breadcrumb-item>
						<el-breadcrumb-item>{{ PageName }}</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>
				<el-col style="width: 335px;height: 38px;">
					<el-input placeholder="请输入内容" :clearable="true" v-model="sousuoneirong">
						<el-button slot="append" icon="el-icon-search" @click="Sousuo"></el-button>
					</el-input>
				</el-col>
			</el-row>
		</el-row>
		<el-row type="flex" justify="center">
			<el-tabs class="wlmainW" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="会员服务" name="huiyuanfuwu">
					<div   style="width: 100%; min-height: 600px;background-color: #FFFFFF;margin-bottom: 20px;padding: 20px;">
            <span  v-html="zhangchengdata"></span>
					</div>
				</el-tab-pane>
				<el-tab-pane label="入会流程" name="ruhuiliucheng" >
					<img class="about-bgboom" src="../../assets/img/ruhuiliuchengBG.png" />

				</el-tab-pane>
				<el-tab-pane label="入会指引" name="huiyuanzhiyin" >

				<vipshenqing v-if="isshowXiangqing" @WLquxiaoguanbi = "WLquxiaoguanbi" :isxuanzhongstr = "isxuanzhongstr"></vipshenqing>

				<WLVipview v-else @WLviplijishenqing = "WLviplijishenqing" ></WLVipview>

				</el-tab-pane>
				<el-tab-pane   label="会员名录" name="huiyuanminglu" >
					<WLNewsTable v-if="isRouterAlive" :Newdata="mingluList" :Newtotal = "total" :Newpagedangqianye = "pagedangqianye" :Newname = "1" @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick" style="width: 1200px;"></WLNewsTable>

				</el-tab-pane>

			</el-tabs>
		</el-row>

	</div>
</template>

<script>
  import store from '@/store'

import WLNewsTable from '@/components/News/WLNewsTable.vue';
import WLVipview from '@/components/News/WLVipview.vue';
import vipshenqing from '@/components/News/vipshenqingview.vue';
import { getVipList } from "@/api/vipapi.js";

import { getVipZhangcheng } from "@/api/vipapi.js";


var pageNo;
var pageSize;

export default {
	name: 'Vip',
	components: {
		WLNewsTable,
		WLVipview,
    vipshenqing
	},
	data() {
		return {
			sousuoneirong: '',
			PageName: '会员服务',
			activeName: 'huiyuanfuwu', //选中了哪里
      zhangchengdata:'',

      isRouterAlive: true,

      //申请页面选中
      isxuanzhongstr:'1',

      //判断显示隐藏详情
      isshowXiangqing:false,

       total:0,//总条数
       pagedangqianye:1,//当前页

			mingluList: [],
      searchData:''

		};
	},
	computed: {

  },

	watch: {},
	methods: {

    getNewdata(){
          const _self = this;
            getVipList({
              pageNo:pageNo,
              pageSize:pageSize
             }).then((res) => {
               let { success, message } = res.data;
               if (success) {
                 // _self.$message.success(message);
                  _self.total = res.data.result.total;
                  _self.mingluList = [];
                  _self.mingluList =  res.data.result.records;
                  this.isRouterAlive = false
                  this.$nextTick(() => (this.isRouterAlive = true))


               } else {
                 _self.$message.error(message);
               }
             });


             getVipZhangcheng({
               page:4
              }).then((res) => {
                let { success, message } = res.data;
                if (success) {
                  // _self.$message.success(message);
                _self.zhangchengdata =  res.data.result.content;


                } else {
                  _self.$message.error(message);
                }
              });

    },



		Sousuo() {
			if (this.sousuoneirong) {
			  this.$router.push({
			    path: '/search',
			    query: {
			      keyword: this.sousuoneirong
			    }
			  })
			} else {
			  this.$message.error('请输入关键字搜索')
			}
		},
		handleClick(tab, event) {

			this.PageName = tab.label;


		},
		//进入详情
		WLcellClick(val) {

		},
		//监听页数
		WLpageindex(val){
      pageNo = val;
      this.pagedangqianye = pageNo;
      this.getNewdata();
		},
    //立即申请 //1 综合类 2 交易类 3 承销 4 经济类 5 服务类
    WLviplijishenqing(e){

      //判断登录
      let token = store.getters.getToken;
      if (token){
      //   console.log(e);
        this.isxuanzhongstr = e;
        this.isshowXiangqing = true;
      }else{
        this.$message.error("请先登录");
         this.$router.push(`/login`);
      }




    },
    WLquxiaoguanbi(){
      this.isshowXiangqing = false;

    }
	},
	created() {
    pageNo = 1;
    pageSize = 15;
    this.getNewdata();
	},
	mounted() {


	}
};
</script>

<style lang="less" >
.vip {
	background-color: #f0f0f0;
	//重写样式

	.is-active {
		color: #ffffff !important;
		background-color: #1d3f95 !important;
		border-radius: 10px 10px 0px 0px;
	}
	.el-tabs__item {
		color: #1d3f95;
		padding: 0;
		width: 120px;
		text-align: center;
		height: 42px;
	}
	.el-tabs__nav-wrap::after {
		background-color: #1d3f95;
	}
	.el-tabs__active-bar {
		background-color: #1d3f95;
	}
}
// .tablediv {
// 	width: 1200px;
// 	max-height: 940px;
// 	padding: 30px;
// 	background-color: #ffffff;
// }
.wlmainW {
	width: 1200px;
}
.Navsousuo {
	width: 1200px;
	height: 70px;
	// background-color: antiquewhite;
	padding: 16px;
}
.about-bg {
	width: 100%;
	min-width: 1200px;
	min-height: 370px;
}
.about-bgboom {
	width: 100%;
	min-width: 1200px;
	min-height: 1572px;
	margin-bottom: 20px;
}
.header {
	width: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
}
.footer {
	width: 100%;
	position: absolute;
	z-index: 10;
	bottom: -120px;
}

//重写tab样式
</style>
